<template>
	<view class="replacePhone">
		<view class="list">
			<input style="font-size: 32rpx;" v-model="form.input" placeholder="请输入手机号" placeholder-style="color:#999" />
			<view></view>
		</view>
		<view class="list">
			<input style="font-size: 32rpx;" v-model="form.input" placeholder="请输入验证码" placeholder-style="color:#999" />
			<view style="margin-bottom: 10rpx;">
				<span class='color3FA ' v-if='time == 0' @click="getyzm">获取验证码</span>
				<span v-else class='color999 '>{{ time }}s</span>
			</view>
		</view>
		<view class="list margintop50">
			<my-button borderRadius="8" height="96" hoverClass="none" width="670" @click="submit">
				完成
			</my-button>
		</view>
	</view>
</template>

<script>
import MyButton from "@/chronicDisease/components/my-button/my-button.vue";
export default {
	components: {
		MyButton
	},
	data() {
		return {
			form: {
				input: ""
			},
			time: 0
		}
	},
	methods: {
		getyzm() {
			this.time = 60
			var interval = setInterval(() => {
				this.time--
				if (this.time == 0) {
					clearInterval(interval)
				}
			}, 1000)
		},
		submit() {
			uni.reLaunch({
				url: './my'
			})
		}
	}
}
</script>

<style lang="scss">
.replacePhone {
	.list {
		margin: 20rpx 40rpx;
		display: flex;
		font-size: 32rpx;
		justify-content: space-between;
		align-items: center;
		height: 84rpx;
		border-bottom: 2rpx solid #d4d4d4;
	}

	.margintop50 {
		margin-top: 100rpx;
	}
}
</style>
